<!-- list.html文件 -->
<#include "../common/scripts.html">
<#include "../common/scripts_add2.html">

<style>
	.oper-search {
		margin: 5px 10px;
	}
	/***隐藏导出按钮**/
	/*.dt-buttons {
		display: none;
	}*/

	.content {
		width: auto;
		height: auto;
		background-color: #fff;
		overflow: visible;
		padding: 0px 10px 20px;
	}

	.select2 {
		width: 200px!important;
		border: 1px solid #ccc;
		border-radius: 3px;
		font-size: 13px;
	}

	.select2-container .select2-selection--single {
		box-sizing: border-box;
		cursor: pointer;
		display: block;
		height: 28px!important;
		-webkit-user-select: none;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #444;
		line-height: 28px!important;
	}

</style>
<div class="page-content-s" style="margin: 10px 10px;">
	<div class="oper-search">
		<form class="form-inline" style="display:inline-block; margin-left:10px; padding-top: 10px;">
			<div class="form-group">
				<label class="control-label-query text-justify">应用系统<span class="span-justify"></span></label>
				<select name="applicationId" id="applicationId" class="selectpicker search-cache" data-live-search="true">
					<#list applications as application>
					 <option value="${(application.id)!}">${application.applicationName!""}</option>
				    </#list>
				</select>
			</div>
			<div class="form-group">
				<label for="roleNameId" class="control-label-query text-justify">角色名称<span class="span-justify"></span></label>
				<input type="text" id="roleNameId" class="input-sm form-control col-sm-5-8" name="roleName" value=""/>
			</div>
			<div class="form-group">
				<label for="roleCodeId" class="control-label-query text-justify">角色编码<span class="span-justify"></span></label>
				<input type="text" id="roleCodeId" class="input-sm form-control col-sm-5-8" name="roleCode" value=""/>
			</div>
			<div class="form-group">
				<span class="btn btn-sm glyphicon glyphicon-search" onclick="searchBtn()">查询</span>
				<#if shiro.hasPermission("role.add")>
				<span class="btn btn-sm glyphicon glyphicon-plus" onclick="addRole(this)" >新增</span>
			    </#if>
			    <#if shiro.hasPermission("role.delete")>
				<span class="btn btn-sm glyphicon glyphicon-trash" onclick="delBatch()">删除</span>
		        </#if>
			</div>
		</form>
	</div>
	<div class="data-list content" style="padding-left: 10px;">
		<table id="mainTable" class="eamtable table-hover"></table>
	</div>
</div>

<script>

    $(document).ready(function() {
        $(".selectpicker").select2();
    });

	function getSearchParam() {
        var roleName = $("#roleNameId").val().trim();
        var roleCode = $("#roleCodeId").val().trim();
        var applicationId = $("#applicationId").val();
        var param = 'roleName='+roleName+'&roleCode='+roleCode+'&applicationId='+applicationId;
		return param;
	}
	
	function getSearchUrl() {
		var url = '/role/ajaxLoadData?' + getSearchParam();
		return url;
	}
	
	function getOperHtml(id) {
        var  html = '';
        html += '<#if shiro.hasPermission("role.edit")><a onclick="editRole(this,\''+id+'\');return false;" title="编辑角色"><i class="fa fa-pencil iconBtn" style="color: rgb(105, 170, 70)"></i></a>&nbsp;&nbsp;</#if>';
        html += '<#if shiro.hasPermission("role.menupeimission.edit")><a onclick="editMenuPeimission(this,\''+id+'\');return false;" title="授权菜单"><i class="fa fa-chevron-circle-down iconBtn" style="color:#1890ff ;"></i></a>&nbsp;&nbsp;</#if>';
        html += '<#if shiro.hasPermission("role.user.edit")><a onclick="editUser(this,\''+id+'\');return false;" title="分配用户"><i class="fa fa-user iconBtn" style="color:rgb(105, 170, 70) ;"></i></a>&nbsp;&nbsp;</#if>';
        html += '<#if shiro.hasPermission("role.delete")><a onclick="deleteOne(\''+id+'\');return false;" title="删除角色"><i class="fa fa-trash-o iconBtn" style="color: rgb(221, 90, 67)"></i></a></#if>';
        return html;
    }

	//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
	var dataTable = $("#mainTable");
	
	$(function () {
		sys.useSimpleRetrieveData();
		var staticPrefix = "${static}";
		var config = sys.DynamicDatabeConfig(staticPrefix, getSearchUrl(), [

            {
                data:null,
				width:20,
                title:"<div class='pretty success' style='margin: 0;'>"+
                    "<input type='checkbox' class='check-all' id='checkAllBtn' onclick='$.clickAllCheck(this)'>"+
                    "<label><i class='mdi mdi-check'></i></label></div>" ,
                render:function(data){
                    return getCheckBox(data.id);
                }
            },
			{data: "roleName", title: "角色名称",},
            {data: "roleCode", title: "角色编码",},
            {
                data : 'createUserName',
                title:'创建人'
            },
            {
                data : 'createTime',
                title:'创建时间',
                className:'min-width-150'
            },
			{
				data: null,
				title: "操作",
                className: 'min-width-80',
				render: function (data) {
					return getOperHtml(data.id,data.roleCode);
				},
			}
		
		], true, {ordering: true});
		
		config.bSort = true;
		config.aLengthMenu = [10,20,50,100];
		//滚动设置
		config.scrollX = true;
		config.autoWidth = true;
        var bodyHeight = $('body').height();
        config.scrollY = bodyHeight - 270;
		config.ordering = true;
		dataTable.dataTable(config);
	});

    function searchBtn(){
        dataTable.api().ajax.url(getSearchUrl()).load(null, false);
    }

    $("select#applicationId").change(function(){
        dataTable.api().ajax.url(getSearchUrl()).load(null, false);
    });

	/**
	 * 新增角色
	 */
	function addRole(obj) {
        if(isEmpty_byJqObj($("#applicationId"))){
            sys2.msg({message: "请您先选择系统名称!"},null,['40px']);
            return;
        }
		var url = "/role/addRole?applicationId="+$("#applicationId").val();
        /**
         * jeesite页面相关》"新增页面(tabPageA)", 若之前打开过该页面,先将其关闭。
         * @type {*|jQuery}
         */
            //关闭旧的tabPage。
        var tabId = $(obj).data("tabId");
        try {
            parent.$("#" + js.tabPage.tabPageId).data("tabPanel").kill(tabId, true);
        } catch (e) {
            console.error("抛出异常!", e);
        }
        //增加tabPage。
        js.addTabPage($(obj), "新增角色", url, true, true);
	}
    /**
     * 修改角色
     */
    function editRole(obj, id) {
        var $this = $(obj);
        var url = "/role/editRole?id=" + id;
        js.addTabPage($this, '编辑角色', url, true, true);
    }
    /*****
	 * 授权菜单
     * @param obj
     * @param id
     */
    function editMenuPeimission(obj, id) {
        var $this = $(obj);
        var url = "/role/editMenuPeimission?id=" + id;
        js.addTabPage($this, '授权菜单', url, true, true);
    }

    function editUser(obj, id) {
        var $this = $(obj);
        var url = "/role/editUser?id=" + id;
        js.addTabPage($this, '分配用户', url, true, true);
    }

    /*****
	 * 单条删除
     * @param id
     */
    function deleteOne(id) {
        sys2.confirm("删除该角色的同时会将该角色下的所有权限、用户都删除，确定删除该数据吗？", function(){
            sys2.getApiData("deleteOne", {
                id : id,
            }, back, "post");
            function back(data) {
                js.showMessage(data.data,"","success",1500)
                dataTable.api().ajax.url(getSearchUrl()).load(null, false);
            }
        });
    }

    /******
	 * 批量删除
     * @param id
     * @returns {string}
     */
	function getCheckBox(id) {
		return '<div class="pretty success" style="margin: 0;">'
			+ '<input type="checkbox" data-id="' + id + '" onclick="$.clickCheckItem(this)"  class="item-checkbox" /> '
			+ '  <label><i class="mdi mdi-check"></i></label>'
			+ '</div>';
	}//获取选中ids var ids = getSelectIds();

    function getSelectIds(){
        var ids = $.getCheckIds();
        if(!ids || ids.length == 0){
            sys.topmsg("至少勾选一项之后再操作！");
            return ;
        }
        return ids;
    }

    function delBatch() {
        var ids = getSelectIds();
        if(!ids || ids.length == 0){
            return ;
        }
        sys2.confirm("删除选中角色的同时会将该角色下的所有权限、用户都删除，确定删除选中数据吗？", function(){
            sys2.getApiData("delBatch", {
                ids : ids,
            }, back, "post");
            function back(data) {
                $(".check-all").attr("checked", false);
                js.showMessage(data.data,"","success",1500)
                dataTable.api().ajax.url(getSearchUrl()).load(null, false);
            }
        });
	}

    function reload() {
        dataTable.dataTable().api().draw();
    }
	
	
</script>

